<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

<script>
//  参考文档 http://blog.haoji.me/js-excel.html#huo-qu-workbook-dui-xiang
import * as XLSX from 'xlsx';
/**
 * 将字符串转ArrayBuffer
 * @param {*} s
 */
function s2ab(s) {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}
/**
 * 将workbook装化成blob对象
 * @param {XLSX.WorkBook} workbook
 */
function workbook2blob(workbook) {
  // 生成excel的配置项
  let w_opts = {
    // 要生成的文件类型
    bookType: "xlsx",
    // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    bookSST: false,
    type: "binary"
  };

  let w_bout = XLSX.write(workbook, w_opts);

  let blob = new Blob([s2ab(w_bout)], {
    type: "application/octet-stream"
  });
  return blob;
}

/**
 *  将blob对象创建bloburl，然后用a标签实现弹出下载框
 * @param {Blob} blob 二进制excel文件
 * @param {String} fileName 文件名称
 */
function openDownloadDialog(blob, fileName) {
  if (typeof blob == "object" && blob instanceof Blob) {
    blob = URL.createObjectURL(blob); // 创建blob地址
  }
  let aLink = document.createElement("a");
  aLink.href = blob;
  // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
  aLink.download = fileName || "";
  let event;
  if (window.MouseEvent) event = new MouseEvent("click");
  //   移动端
  else {
    event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}

export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    tableHead: {
      type: Object,
    },
    tableName: {
      type: String,
      required: true,
    }
  },

  methods: {
    exportExcel() {
      let sheet3 = XLSX.utils.json_to_sheet(this.list);
      // let sheet3 = XLSX.utils.sheet_to_html(this.list);
      let wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, sheet3, this.tableName);
      const workbookBlob = workbook2blob(wb);
      openDownloadDialog(workbookBlob, `${this.tableName}.xlsx`);
    },
  }
}
</script>

<style lang="less" scoped>

</style>


